package com.sevennotes.classtable.ui.pages.components

import android.util.Log
import androidx.compose.foundation.*
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.material3.Slider
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.ExperimentalUnitApi
import androidx.compose.ui.unit.dp
import androidx.compose.ui.zIndex
import com.sevennotes.classtable.config.Config
import com.sevennotes.classtable.config.Settings
import com.sevennotes.classtable.model.ClassItemWithName
import com.sevennotes.classtable.ui.pages.main_screen.ClassItemState
import com.sevennotes.classtable.ui.pages.main_screen.MainScreenState
import com.sevennotes.classtable.utils.TimeUtil
import com.sevennotes.classtable.utils.contentColor

@ExperimentalUnitApi
@Composable
fun Tables(
  modifier: Modifier = Modifier,
  mainScreenState: MainScreenState,
  onClassItemMoved: (ClassItemState, Int, Int) -> Unit,
  onClassItemTapped: (ClassItemWithName) -> Unit,
  onXpercentChange: (Float) -> Unit,
  onYpercentChange: (Float) -> Unit,
  percentVis: Boolean
) {
  val hScrollState = rememberScrollState()
  var hubVis by remember { mutableStateOf(false) }
  var hubText by remember { mutableStateOf("") }
  Box(
    modifier = modifier.fillMaxSize()
  ) {
    if (hubVis) {
      HubText(
        modifier = Modifier
          .offset(20.dp, 25.dp)
          .zIndex(4f),
        text = hubText
      )
    }
    //改变大小的滑杆
    if (percentVis) {
      Column(
        modifier = Modifier
          .fillMaxSize()
          .zIndex(4f)
      ) {
        Row(modifier = Modifier.weight(1f)) {
          Box(modifier = Modifier.weight(1f))
          //放置竖直滑杆
          Box(
            modifier = Modifier
              .fillMaxHeight()
              .padding(vertical = 200.dp),
            contentAlignment = Alignment.Center
          ) {
            VerticalSlider(
              value = Settings.heightPercent,
              min = 0,
              max = 1,
              onValueChange = onYpercentChange
            )
          }
        }
        //放置水平滑杆
        Box(
          modifier = Modifier
            .fillMaxWidth()
            .padding(horizontal = 80.dp),
          contentAlignment = Alignment.Center
        ) {
          Slider(
            value = Settings.widthPercent,
            valueRange = 0f..6f,
            onValueChange = onXpercentChange,
          )
        }
      }
    }
    Column(
      modifier = Modifier
        .fillMaxSize()
    ) {
      Row(
        modifier = Modifier
          .height(IntrinsicSize.Min)
          .horizontalScroll(hScrollState)
      ) {
        Spacer(modifier = Modifier.width(20.dp))
        repeat(Config.weekdays.size) {
          Divider(
            modifier = Modifier
              .fillMaxHeight()
              .width(1.dp),
            color = Config.dividerColor
          )
          Text(
            text = Config.weekdays[it],
            modifier = Modifier
              .align(Alignment.CenterVertically)
              .width(mainScreenState.oneDayWidth.dp)
              .height(20.dp)
          )
        }
      }
      TableBox(
        mainScreenState = mainScreenState,
        hScrollState = hScrollState,
        onClassItemMoved = { i, x, y ->
          hubVis = false
          onClassItemMoved(i, x, y)
        },
        onClassItemTapped = onClassItemTapped,
        onClassItemDrag = { classItem, x, y ->
          val newWeekDay = mainScreenState.calculateNewWeekDay(classItem.item.classItem.weekDay, x)
          val newTime = mainScreenState.calculateNewTime(classItem.item.classItem.startTime, y)
          hubText = TimeUtil.conversionTimeToString(
            startTime = newTime,
            duration = classItem.item.classItem.duration,
            weekDay = newWeekDay
          )
          hubVis = true
        }
      )
    }
  }
}

@Composable
fun HubText(
  modifier: Modifier = Modifier,
  text: String
) {
  Box(
    modifier = modifier
      .background(
        color = MaterialTheme.colors.primary,
        shape = RoundedCornerShape(10.dp)
      )
      .padding(5.dp),
    contentAlignment = Alignment.Center
  ) {
    Text(text = text, color = contentColor(MaterialTheme.colors.primary))
  }
}
